<template>
	<view class="mainPage">
		<view class="mainPage_top">
			<view class="setting" v-if="isSettingShow">
				<uni-icons type="gear-filled" color="#2979ff" size="20" @click="setBaseUrl"></uni-icons>
			</view>
			<view class="mainPage_top_center">
				<view class="mainPage_top_center_title"><image src="/static/login/logo.png" style="width: 100rpx;height: 100rpx;"></image>
				<span class="mainPage_top_center_title_text">云网OA</span>
				</view>				
				<view class="mainPage_top_center_img" style="display: none;">
					<image src="/static/login/login_top.png"></image>
				</view>
			</view>
		</view>
		<view class="cententPage">
			<view class="login-item heri-start-center" :class="{ is_red: isNotAllow }" style="margin-bottom: 30rpx;">
				<input type="text" class="login-content" placeholder="请输入用户名" v-model="loginInfo.name"
					@focus="isNotAllow = false" />
			</view>
			<view class="login-item heri-start-center" :class="{ is_red: isNotAllow }" style="margin-bottom: 30rpx;">
				<input :type="showPassword?'text':'password'" :focus="focusPwdState" class="login-content"
					placeholder="请输入密码" v-model="loginInfo.password" @focus="isNotAllow = false" />
				<view style="padding-right: 20rpx;">
					<uni-icons type="eye" color="#abafba" size="30" @click="showPassword = true"
						v-if="!showPassword"></uni-icons>
					<uni-icons type="eye-filled" color="#2b2c2f" size="30" @click="showPassword = false"
						v-else></uni-icons>
				</view>
			</view>
			<view class="forget heri-between">
				<text @click="forgetPwd">忘记密码</text>
				<text @click="scanCode">扫码</text>
			</view>
			<view class="login-btn" @click="login">登录</view>
		</view>
	</view>
</template>

<script>
	import {
		postAction,
		getAction,
		getResultAllAction
	} from '@/utils/request.js';
	import {
		Toast,
		reCheck,
		cache,
		getOpenId
	} from '@/utils/commonHeader.js';
	import {
		Api,
		setApiBaseUrl
	} from "@/utils/Api.js";

	export default {
		data() {
			return {
				loginInfo: {
					name: '',
					password: '',
					// client: "IOS",
					deviceId: '', //设备id
					openId: '',
					cid: ''
				},
				url: {
					login: '/mobile/login'
				},
				isNotAllow: false,
				backImg: '../../static/login/login_bg.png',
				isSettingShow: false,
				focusPwdState: false,
				showPassword: false
			};
		},
		onLoad() {
			uni.setNavigationBarColor({
				frontColor: '#000000', // 必写项
				backgroundColor: '#E3EEFF', // 必写项
				animation: {
					// 可选项
					duration: 400,
					timingFunc: 'easeIn'
				}
			});

			// #ifdef MP-WEIXIN
			this.isSettingShow = false;
			// #endif

			// #ifdef H5
			this.isSettingShow = false;
			// #endif

			// #ifdef APP-PLUS ||  APP-HARMONY
			this.isSettingShow = true;
			// #endif
		},
		mounted() {
			let loginRemember = uni.getStorageSync("loginRemember");
			console.log('loginRemember', loginRemember);
			if (loginRemember && loginRemember.isRememberUserName) {
				if (loginRemember.loginName) {
					this.loginInfo.name = loginRemember.loginName ? loginRemember.loginName : '';
					// 密码框直接获取焦点，出现输入键盘，不是很合适
					// this.focusPwdState = true;
				}
			}
		},
		created() {},
		methods: {
			login() {
				try {
					this.isNotAllow = false;
					console.log('getOpenId()', getOpenId());
					/*校验用户名和密码*/
					if (!this.loginInfo.name) {
						Toast('none', '请输入用户名');
						return;
					}
					if (!this.loginInfo.password) {
						Toast('none', '请输入密码');
						return;
					}

					console.log('this.url.login', this.url.login);

					// #ifdef MP-WEIXIN
					let openId = getOpenId();
					if (openId) this.loginInfo.openId = openId;
					// #endif

					// #ifdef APP-PLUS
					this.loginInfo.cid = plus.push.getClientInfo().clientid;
					// #endif
					console.log("this.loginInfo", this.loginInfo)
					getResultAllAction(this.url.login, this.loginInfo).then(res => {
						console.log(res.data);
						if (res.data.res == 0) {
							console.log('res登录', res);
							//登录成功
							let result = res.data.result;

							uni.setStorage({
								key: 'wxMiniLoginMode',
								data: res.data.wxMiniLoginMode
							});
							uni.setStorage({
								key: 'loginMode',
								data: res.data.loginMode
							});

							let token = '';
							//1.缓存token
							if (res.header) {
								token = res.header.authorization ? res.header.authorization : res.header
									.Authorization ? res.header.Authorization : '';
							}

							if (!token) {
								uni.showToast({
									icon: "none",
									title: '非法操作',
								});
								return;
							}

							// #ifdef MP-WEIXIN ||  APP-PLUS
							// token = res.header.Authorization ? res.header.Authorization : "";
							// #endif

							// #ifdef H5
							// token = res.header.authorization ? res.header.authorization : "";
							// #endif
							//2.缓存用户信息 loginInfo
							let loginInfo = result ? result : {};
							//缓存登录头部
							let header = res.header ? res.header : {};
							console.log('login header', header);
							console.log('loginInfo.isRememberUserName', loginInfo.isRememberUserName);
							if (loginInfo.isRememberUserName) {
								uni.setStorage({
									key: 'loginRemember',
									data: {
										isRememberUserName: loginInfo.isRememberUserName,
										loginName: this.loginInfo.name,
									},
								});
							}

							uni.setStorage({
								key: 'loginInfo',
								data: {
									token: token,
									loginInfo: loginInfo,
									header: header
								},
								success() {
									// 存储参数
									reCheck();
									// cache("times", 1);
									uni.setStorage({
										key: 'curRoleCode',
										data: header.curRoleCode,
										success() {
											console.log('setStorage success');
											// 是否可切换角色
											if (result.isRoleSwitchable) {
												console.log('result.isRoleSwitchable', result
													.isRoleSwitchable);
												//跳转，因为setStorage是异步的，所以要setTimeout
												setTimeout(() => {
													uni.redirectTo({
														url: `/pages/login/selectRole?roleList=${JSON.stringify(result.roleList)}`
													});
												}, 0);
											} else {
												//跳转
												setTimeout(() => {
													uni.reLaunch({
														url: '../applications/applications'
													});
												}, 0);
											}
										},
										fail() {
											console.error('setStorage error');
										}
									});
								}
							});
							Toast('none', res.data.msg);
						} else {
							this.isNotAllow = true;
							// result.isPwdCanReset
							if (res.data.isForceChangePwd) {
								//跳转到修改密码页
								uni.reLaunch({
									url: `/cmn/changePassword?skey=${res.header.skey}`
								});
								return;
							} else {
								Toast('none', res.data.msg);
							}
						}
					});
				} catch (error) {
					console.log("login-error", error)
				}
			},
			//扫码
			scanCode() {
				uni.scanCode({
					success: res => {
						console.log('scanCode', res);
						let result = res.result;
						console.log('scanCode result', result);
						if (result == null) {
							uni.showToast({
								icon: 'none',
								title: '扫码失败'
							});
							return;
						}

						var index = result.indexOf('public');
						if (index == -1) {
							uni.showToast({
								icon: 'none',
								mask: false,
								title: '服务器地址错误，请重新设置'
							});
						} else {
							var appBaseUrl = result.substring(0, index - 1);
							console.log('appBaseUrl: ' + appBaseUrl);
							uni.showLoading({
								title: '检测地址中...',
								mask: true
							});
							setApiBaseUrl(appBaseUrl);
							// 检测URL连接
							getResultAllAction(appBaseUrl, {})
								.then(res => {
									console.log('res', res);
									if (res.statusCode == 200) {
										uni.setStorage({
											key: 'appBaseUrl',
											data: appBaseUrl
										});
										Toast('none', '登录地址配置成功');
									} else {
										Toast('none', '登录地址检测失败');
									}
								})
								.finally(() => {
									uni.hideLoading();
								});
						}
					}
				});
			},
			setBaseUrl() {
				uni.navigateTo({
					url: '/pages/login/setAppBaseUrl'
				});
			},
			forgetPwd() {
				uni.navigateTo({
					url: '/cmn/forgetPassword'
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.mainPage {
		// padding: 80rpx 50rpx 0;
		// min-height: auto;
		height: 100vh;
		box-sizing: border-box;
		// position: relative;
		background-color: #f5f6f8 !important;
		// display: flex;
		// align-items: center;
		// justify-content: center;
		background: url(../../static/login/login_bg.jpg) no-repeat;
		background-size: cover;

		.mainPage_top {
			/* #ifdef APP-HARMONY */
			height: 650rpx;
			/* #endif */

			/* #ifndef APP-HARMONY */
			height: 883rpx;
			/* #endif */
			
			/* #ifdef MP-WEIXIN */
			height: 830rpx;
			/* #endif */
			
			width: 100%;
			position: relative;
			// background: url(../../static/login/login_bg.png);
			background-size: 100% 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			.setting {
				position: absolute;
				right: 20px;
				top: 80px;
			}

			.mainPage_top_center {
				text-align: center;
				padding-top: 30px;
				display: flex;
				align-items: center;

				.mainPage_top_center_img {
					width: 500rpx;
					height: 320rpx;
					margin: 25px auto;
					margin-top: 35px;
					margin-bottom: 40px;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.mainPage_top_center_title {
					margin-top: 10.5rpx;
					margin-bottom: 10rpx;
					font-size: 55rpx;
					font-weight: 800;
					color: #2b2c2f;
					display: flex;
					justify-content: center;
					align-items: center;
					gap: 60rpx;
					flex-direction: column;
					
					image {
						width: 70px !important;
						height: 70px !important;
					}
				}
				
				.mainPage_top_center_title_text {
					color: #323232
				}
			}
		}

		::v-deep.input-placeholder {
			color: #abafba;
		}

		::v-deep .uni-input-input {
			color: #2b2c2f;
		}

		.cententPage {
			margin-top: 50rpx;
			padding: 0 60rpx;
		}

		.logo {
			margin-bottom: 30rpx;

			.logoImg {
				width: 160rpx;
				height: 160rpx;
			}
		}

		.login-title {
			width: 100%;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
			margin-bottom: 123rpx;
		}

		.login-item {
			width: 100%;

			background-color: #fff;
			border-radius: 12rpx;

			.CheckCode {
				width: 150rpx;
				height: 70rpx;
			}

			.login-content {
				height: 90rpx;
				margin-left: 20rpx;
				font-size: 28rpx;
				flex: 1;
			}

			&:nth-child(3) {
				margin-bottom: 60rpx;
			}
		}

		.is_red {
			border-bottom: 1px solid red;
		}

		.login-btn {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
			background: #4b7aff;
			border-radius: 12rpx;
			margin-top: 90rpx;
			opacity: 0.9;
			z-index: 1000;
		}

		.forget {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #4b7aff;
			line-height: 40rpx;
			opacity: 0.8;
		}
	}
</style>